<template>
  <div class="icons">
    <div class="icon" v-for='item of iconList' :key="item.id">
      <div class="icon-img">
          <img class="icon-content" :src="item.imgUrl" alt="">
      </div>
      <p class="icons-text">{{item.desc}}</p>
    </div>
    </div>
</template>

<script>
export default {
  name: 'icons',
  props: {
    iconList: Array
  },
  data () {
    return {
      show:false
    }
  }
}
</script>

<style lang='stylus' scoped>
  @import '~styles/vribles.styl'
  .icons
    margin-top: .2rem
    width: 100%
    height: 55%vw
    .icon
      float: left
      width: 25%
      height: 25vw
      position: relative
      .icon-img
        overflow: hidden
        position: absolute
        top: 0
        left: 0
        right: 0
        bottom: .4rem
        text-align: center
        box-sizing: border-box
        .icon-content
          height: 100%
          display: block
          margin:  auto
          padding-top: .1rem
      .icons-text
        position: absolute
        top: 1.68rem
        width: 100%
        line-height: 0.1rem
        height: 0.4rem
        text-align: center
        color: $textColor
</style>
